<template>
  <view class="address-container">
    <!-- 智能识别地址入口 -->
    <!-- <view class="smart-address" @tap="showSmartAddressPanel">
      <view class="smart-icon-wrapper">
        <image class="smart-icon" src="/static/icons/s.png"></image>
      </view>
      <text class="smart-text">智能识别收货地址</text>
      <text class="arrow-right">›</text>
    </view> -->

    <!-- 地址列表 -->
    <view class="address-list" v-if="addressList.length > 0">
      <view class="address-item" v-for="(item, index) in addressList" :key="index"
        :class="{ 'slide-open': item.showActions, 'selected': selectedId === item.id }"
        @touchstart="touchStart($event, index)" @touchmove="touchMove($event, index)"
        @touchend="touchEnd($event, index)">
        <view class="address-content" @tap="selectAddress(item)">
          <view class="address-info">
            <view class="address-top">
              <text class="address-name">{{ item.name }}</text>
              <text class="address-phone">{{ item.phone }}</text>
              <view class="address-tag" v-if="item.is_default">
                <text>默认</text>
              </view>
              <view class="address-tag home-tag" v-if="item.tag === 'home'">
                <text>家</text>
              </view>
              <view class="address-tag company-tag" v-if="item.tag === 'company'">
                <text>公司</text>
              </view>
              <view class="address-tag school-tag" v-if="item.tag === 'school'">
                <text>学校</text>
              </view>
            </view>
            <text class="address-detail">{{ item.region.province }}{{ item.region.city }}{{ item.region.region }}{{
              item.detail }}</text>
          </view>
          <view class="address-right">
            <text class="arrow-right-small">›</text>
          </view>
        </view>
        <!-- 滑动操作区域 -->
        <view class="address-actions">
          <view class="action-btn edit-btn" @tap="editAddress(item)">
            <image class="action-icon" src="/static/icons/edit-white.png"></image>
            <text>编辑</text>
          </view>
          <view class="action-btn delete-btn" @tap="deleteAddress(item.address_id)">
            <image class="action-icon" src="/static/icons/delete-white.png"></image>
            <text>删除</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 空地址提示 -->
    <view class="empty-address" v-else>
      <image class="empty-icon" src="/static/icons/empty-address.png"></image>
      <text class="empty-text">您还没有添加收货地址</text>
      <text class="empty-subtitle">添加地址后，下次下单更便捷</text>
    </view>

    <!-- 添加新地址按钮 -->
    <view class="add-address-btn" @tap="addNewAddress">
      <text class="add-icon">+</text>
      <text class="add-text">新增收货地址</text>
    </view>

    <!-- 地址编辑弹窗 -->
    <view class="address-modal" v-if="showAddressModal">
      <view class="modal-mask" @tap="closeModal"></view>
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">{{ isEdit ? '编辑地址' : '新增地址' }}</text>
          <text class="close-btn" @tap="closeModal">×</text>
        </view>

        <view class="form-item">
          <text class="form-label">收货人</text>
          <input type="text" v-model="currentAddress.name" placeholder="请输入姓名" class="form-input" />
        </view>

        <view class="form-item">
          <text class="form-label">手机号码</text>
          <input type="number" v-model="currentAddress.phone" placeholder="请输入手机号码" class="form-input" maxlength="11" />
        </view>

        <view class="form-item">
          <text class="form-label">所在地区</text>
          <uni-data-picker v-model="currentAddress.region_id" :localdata="regionOption" popup-title="请选择省/市/区"
            :map="{ text: 'name', value: 'id' }" @change="setRegion" :clear-icon="false" />
        </view>

        <view class="form-item">
          <text class="form-label">详细地址</text>
          <textarea v-model="currentAddress.detail" placeholder="请输入详细地址，如街道、门牌号等" class="form-textarea" />
          <!-- <view class="address-paste-tip" @tap="pasteAddress">
            <image class="paste-icon" src="/static/icons/paste.png"></image>
            <text>粘贴地址</text>
          </view> -->
        </view>

        <view class="form-item">
          <text class="form-label">地址标签</text>
          <view class="tag-options">
            <view class="tag-option" :class="{ 'tag-active': currentAddress.tag === 'home' }" @tap="selectTag('home')">
              <text>家</text>
            </view>
            <view class="tag-option" :class="{ 'tag-active': currentAddress.tag === 'company' }"
              @tap="selectTag('company')">
              <text>公司</text>
            </view>
            <view class="tag-option" :class="{ 'tag-active': currentAddress.tag === 'school' }"
              @tap="selectTag('school')">
              <text>学校</text>
            </view>
            <view class="tag-option custom-tag" :class="{ 'tag-active': currentAddress.tag === 'custom' }"
              @tap="selectTag('custom')">
              <text>自定义</text>
            </view>
          </view>
          <input v-if="currentAddress.tag === 'custom'" type="text" v-model="currentAddress.customTagText"
            placeholder="请输入自定义标签" class="form-input custom-tag-input" maxlength="4" />
        </view>

        <view class="form-item switch-item">
          <text class="form-label">设为默认地址</text>
          <switch :checked="currentAddress.is_default == 1" @change="switchDefault" color="#5C8D69" />
        </view>

        <view class="form-btns">
          <view class="form-btn cancel-btn" @tap="closeModal">取消</view>
          <view class="form-btn confirm-btn" @tap="saveAddress">保存</view>
        </view>
      </view>
    </view>

    <!-- 智能识别地址弹窗 -->
    <view class="address-modal" v-if="showSmartAddressPanel">
      <view class="modal-mask" @tap="closeSmartPanel"></view>
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">智能识别地址</text>
          <text class="close-btn" @tap="closeSmartPanel">×</text>
        </view>

        <view class="form-item">
          <text class="form-label">请粘贴包含收货信息的完整文本</text>
          <textarea v-model="smartAddressText" placeholder="例如：张三 13800138000 浙江省杭州市西湖区龙井路1号"
            class="form-textarea smart-textarea" />
        </view>

        <view class="recognition-rules">
          <text class="rule-title">识别规则：</text>
          <text class="rule-text">1. 文本需包含姓名、手机号和地址信息</text>
          <text class="rule-text">2. 建议包含完整的省市区信息</text>
          <text class="rule-text">3. 多余文字不影响识别</text>
        </view>

        <view class="form-btns">
          <view class="form-btn confirm-btn full-btn" @tap="recognizeAddress">识别地址</view>
        </view>
      </view>
    </view>

    <!-- 识别结果预览弹窗 -->
    <view class="address-modal" v-if="showRecognitionResult">
      <view class="modal-mask" @tap="closeRecognitionResult"></view>
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">识别结果</text>
          <text class="close-btn" @tap="closeRecognitionResult">×</text>
        </view>

        <view class="recognition-result">
          <view class="result-item">
            <text class="result-label">收货人：</text>
            <text class="result-value">{{ recognizedAddress.name }}</text>
          </view>
          <view class="result-item">
            <text class="result-label">手机号：</text>
            <text class="result-value">{{ recognizedAddress.phone }}</text>
          </view>
          <view class="result-item">
            <text class="result-label">所在地区：</text>
            <text class="result-value">{{ recognizedAddress.province }} {{ recognizedAddress.city }}
              {{ recognizedAddress.district }}</text>
          </view>
          <view class="result-item">
            <text class="result-label">详细地址：</text>
            <text class="result-value">{{ recognizedAddress.detail }}</text>
          </view>
        </view>

        <view class="form-btns">
          <view class="form-btn cancel-btn" @tap="closeRecognitionResult">取消</view>
          <view class="form-btn confirm-btn" @tap="useRecognizedAddress">使用此地址</view>
        </view>
      </view>
    </view>

    <!-- 删除确认弹窗 -->
    <view class="confirm-modal" v-if="showDeleteModal">
      <view class="modal-mask" @tap="closeDeleteModal"></view>
      <view class="confirm-content">
        <text class="confirm-title">删除地址</text>
        <text class="confirm-text">确定要删除该收货地址吗？</text>
        <view class="confirm-btns">
          <view class="confirm-btn cancel-btn" @tap="closeDeleteModal">取消</view>
          <view class="confirm-btn delete-btn" @tap="confirmDelete">删除</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getRegionOption } from '../../api/public';
import { addAddressApi, addressListApi, delAddressApi, editAddressApi } from '../../api/user';

export default {
  data() {
    return {
      selectedId: '',
      addressList: [],
      showAddressModal: false,
      showDeleteModal: false,
      showSmartAddressPanel: false,
      showRecognitionResult: false,
      isEdit: false,
      deleteId: null,
      currentAddress: {
        address_id: null,
        name: '',
        phone: '',
        province_id: '',
        city_id: '',
        region_id: '',
        detail: '',
        is_default: false,
        tag: '',
        customTagText: ''
      },
      smartAddressText: '',
      recognizedAddress: {
        name: '',
        phone: '',
        province: '',
        city: '',
        district: '',
        detail: ''
      },
      // 触摸滑动相关变量
      startX: 0,
      moveX: 0,
      isSelect: false,
      regionOption: []
    }
  },
  onLoad(options) {
    // 如果有传入的选中地址ID
    if (options.selectedId) {
      this.selectedId = options.selectedId;
    } else {
      // 默认选中默认地址
      const defaultAddress = this.addressList.find(item => item.is_default);
      if (defaultAddress) {
        this.selectedId = defaultAddress.id;
      }
    }
    this.isSelect = options.select ? true : false
    this.getAddressList();
    //地区数据
    getRegionOption().then(res => {
      this.regionOption = res
    })
  },
  methods: {
    // 返回上一页
    navigateBack() {
      uni.navigateBack();
    },

    getAddressList() {
      addressListApi().then((res) => {
        this.addressList = res.list
      })
    },

    // 地址选择
    selectAddress(item) {
      if (!this.isSelect) {
        return false
      }
      // 关闭所有打开的滑动操作
      this.addressList.forEach(addr => {
        addr.showActions = false;
      });

      this.selectedId = item.id;

      // 将地址数据传回上一页
      const pages = getCurrentPages();
      const prevPage = pages[pages.length - 2];

      // 设置上一页的地址数据
      if (prevPage && prevPage.$vm) {
        prevPage.$vm.address = JSON.parse(JSON.stringify(item));
      }

      uni.navigateBack();
    },

    // 滑动操作相关方法
    touchStart(e, index) {
      // 关闭其他打开的滑动操作
      this.addressList.forEach((item, idx) => {
        if (idx !== index) {
          item.showActions = false;
        }
      });

      this.startX = e.touches[0].clientX;
    },

    touchMove(e, index) {
      this.moveX = e.touches[0].clientX;
      const distance = this.startX - this.moveX;

      // 只允许向左滑动显示操作按钮
      if (distance > 50) {
        this.addressList[index].showActions = true;
      } else if (distance < -50) {
        this.addressList[index].showActions = false;
      }
    },

    touchEnd(e, index) {
      this.startX = 0;
      this.moveX = 0;
    },

    // 地址操作相关方法
    addNewAddress() {
      this.isEdit = false;
      this.currentAddress = {
        id: null,
        name: '',
        phone: '',
        province: '',
        city: '',
        district: '',
        detail: '',
        is_default: false,
        tag: '',
        customTagText: ''
      };
      this.showAddressModal = true;
    },

    editAddress(item) {
      this.isEdit = true;
      this.currentAddress = JSON.parse(JSON.stringify(item));
      this.showAddressModal = true;
    },

    closeModal() {
      this.showAddressModal = false;
    },

    openRegionPicker() {

      // 实际项目中应该调用地区选择器
    },

    setRegion(e) {
      const val = e.detail.value
      this.currentAddress.province_id = val[0].value
      this.currentAddress.city_id = val[1].value
      this.currentAddress.region_id = val[2].value
    },

    switchDefault(e) {
      this.currentAddress.is_default = e.detail.value ? 1 : 0;
    },

    selectTag(tag) {
      this.currentAddress.tag = tag;
      switch (tag) {
        case 'home':
          this.currentAddress.customTagText = '家';
          break;
        case 'company':
          this.currentAddress.customTagText = '公司';
          break;
        case 'school':
          this.currentAddress.customTagText = '学校';
          break;
        default:
          this.currentAddress.customTagText = '';
          break;
      }
      if (tag !== 'custom') {
        //this.currentAddress.customTagText = '';
      }
    },

    saveAddress() {
      // 表单验证
      if (!this.currentAddress.name) {
        return uni.showToast({
          title: '请输入收货人姓名',
          icon: 'none'
        });
      }
      if (!this.currentAddress.phone) {
        return uni.showToast({
          title: '请输入手机号码',
          icon: 'none'
        });
      }
      if (!/^1\d{10}$/.test(this.currentAddress.phone)) {
        return uni.showToast({
          title: '手机号码格式不正确',
          icon: 'none'
        });
      }
      if (!this.currentAddress.province_id || !this.currentAddress.city_id || !this.currentAddress.region_id) {
        return uni.showToast({
          title: '请选择所在地区',
          icon: 'none'
        });
      }
      if (!this.currentAddress.detail) {
        return uni.showToast({
          title: '请输入详细地址',
          icon: 'none'
        });
      }

      // 自定义标签验证
      if (this.currentAddress.tag === 'custom' && !this.currentAddress.customTagText) {
        return uni.showToast({
          title: '请输入自定义标签',
          icon: 'none'
        });
      }

      // 如果设置为默认地址，需要将其他地址设为非默认
      if (this.currentAddress.is_default) {
        this.addressList.forEach(item => {
          if (item.id !== this.currentAddress.id) {
            item.is_default = false;
          }
        });
      }
      console.log(this.currentAddress)
      if (this.isEdit) {
        editAddressApi(this.currentAddress).then((res) => {
          this.getAddressList()
          // 保存成功提示
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          });

          this.closeModal();
        })
      } else {
        addAddressApi(this.currentAddress).then((res) => {
          this.getAddressList()
          // 保存成功提示
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          });

          this.closeModal();
        })
      }
    },

    deleteAddress(id) {
      this.deleteId = id;
      this.showDeleteModal = true;
    },

    closeDeleteModal() {
      this.showDeleteModal = false;
      this.deleteId = null;
    },

    confirmDelete() {
      if (this.deleteId) {
        delAddressApi({
          address_id: this.deleteId
        }).then((res) => {
          this.getAddressList()
          uni.showToast({
            title: '删除成功',
            icon: 'success'
          });
          this.closeDeleteModal();
        })
      }
    },

    // 复制粘贴地址相关方法
    pasteAddress() {
      uni.getClipboardData({
        success: (res) => {
          if (res.data) {
            this.smartAddressText = res.data;
            this.showSmartAddressPanel = true;
            this.closeModal();
          } else {
            uni.showToast({
              title: '剪贴板为空',
              icon: 'none'
            });
          }
        }
      });
    },

    // 智能识别地址相关方法
    showSmartAddressPanel() {
      this.smartAddressText = '';
      this.showSmartAddressPanel = true;
    },

    closeSmartPanel() {
      this.showSmartAddressPanel = false;
    },

    recognizeAddress() {
      if (!this.smartAddressText.trim()) {
        return uni.showToast({
          title: '请输入地址文本',
          icon: 'none'
        });
      }

      // 模拟识别逻辑
      const text = this.smartAddressText;

      // 模拟提取姓名（假设姓名是2-4个汉字）
      const nameMatch = text.match(/[\u4e00-\u9fa5]{2,4}/);
      const name = nameMatch ? nameMatch[0] : '';

      // 模拟提取手机号（假设是11位数字）
      const phoneMatch = text.match(/1[3-9]\d{9}/);
      const phone = phoneMatch ? phoneMatch[0] : '';

      // 模拟提取省市区（简单演示）
      const provinces = ['北京市', '上海市', '广东省', '浙江省', '江苏省'];
      let province = '', city = '', district = '';

      for (const p of provinces) {
        if (text.includes(p)) {
          province = p;
          break;
        }
      }

      // 模拟城市提取
      const cities = ['北京市', '上海市', '广州市', '深圳市', '杭州市', '南京市'];
      for (const c of cities) {
        if (text.includes(c)) {
          city = c;
          break;
        }
      }

      // 模拟区县提取
      const districts = ['朝阳区', '海淀区', '西湖区', '江干区', '浦东新区', '静安区'];
      for (const d of districts) {
        if (text.includes(d)) {
          district = d;
          break;
        }
      }

      // 假设剩余的是详细地址
      let detail = text
        .replace(name, '')
        .replace(phone, '')
        .replace(province, '')
        .replace(city, '')
        .replace(district, '');

      // 清理详细地址中的多余空格和符号
      detail = detail.replace(/[,，、。.;；:：\s]+/g, ' ').trim();

      // 设置识别结果
      this.recognizedAddress = {
        name,
        phone,
        province,
        city,
        district,
        detail
      };

      this.showSmartAddressPanel = false;
      this.showRecognitionResult = true;
    },

    closeRecognitionResult() {
      this.showRecognitionResult = false;
    },

    useRecognizedAddress() {
      this.currentAddress = {
        ...this.currentAddress,
        name: this.recognizedAddress.name,
        phone: this.recognizedAddress.phone,
        province: this.recognizedAddress.province,
        city: this.recognizedAddress.city,
        district: this.recognizedAddress.district,
        detail: this.recognizedAddress.detail
      };

      this.showRecognitionResult = false;
      this.showAddressModal = true;
    }
  }
}
</script>

<style>
.address-container {
  background-color: #F8F5F0;
  /* 米白色背景 */
  min-height: 100vh;
  position: relative;
  padding-bottom: 120rpx;
}

/* 顶部导航 */
.nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 88rpx;
  background-color: #F8F5F0;
  border-bottom: 1px solid #EEEAE3;
  padding: 0 30rpx;
  position: sticky;
  top: 0;
  z-index: 10;
}

.nav-back {
  width: 50rpx;
  height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  font-size: 36rpx;
  color: #5C4B3A;
}

.nav-title {
  font-size: 32rpx;
  color: #5C4B3A;
  font-family: "汉仪尚巍手书", "思源宋体", sans-serif;
  font-weight: bold;
}

.nav-placeholder {
  width: 50rpx;
}

/* 智能识别地址入口 */
.smart-address {
  margin: 20rpx 30rpx;
  background-color: #FFFFFF;
  border-radius: 16rpx;
  padding: 24rpx 30rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.smart-icon-wrapper {
  width: 80rpx;
  height: 80rpx;
  background-color: rgba(92, 141, 105, 0.1);
  /* 淡青瓷绿 */
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.smart-icon {
  width: 40rpx;
  height: 40rpx;
}

.smart-text {
  flex: 1;
  font-size: 28rpx;
  color: #5C4B3A;
  font-family: "思源宋体", sans-serif;
}

.arrow-right {
  font-size: 36rpx;
  color: #8C7B68;
}

/* 地址列表 */
.address-list {
  padding: 0 30rpx;
}

.address-item {
  position: relative;
  margin-bottom: 20rpx;
  border-radius: 16rpx;
  overflow: hidden;
  transform: translateX(0);
  transition: transform 0.3s;
}

.address-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #FFFFFF;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 2;
  position: relative;
}

.slide-open .address-content {
  transform: translateX(-200rpx);
}

.address-item.selected .address-content {
  background-color: #F1EFE8;
  border-left: 6rpx solid #5C8D69;
}

.address-info {
  flex: 1;
  margin-right: 20rpx;
}

.address-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 15rpx;
}

.address-name {
  font-size: 30rpx;
  color: #5C4B3A;
  font-family: "思源宋体", sans-serif;
  font-weight: bold;
  margin-right: 20rpx;
}

.address-phone {
  font-size: 28rpx;
  color: #8C7B68;
  font-family: "思源宋体", sans-serif;
  margin-right: 20rpx;
}

.address-tag {
  background-color: #E8C872;
  /* 佛经黄 */
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
  margin-right: 10rpx;
}

.home-tag {
  background-color: #5C8D69;
  /* 青瓷绿 */
}

.company-tag {
  background-color: #7B7FC9;
  /* 淡紫色 */
}

.school-tag {
  background-color: #E79B5E;
  /* 橙色 */
}

.address-tag text {
  font-size: 22rpx;
  color: #FFFFFF;
  font-family: "思源宋体", sans-serif;
}

.address-detail {
  font-size: 26rpx;
  color: #5C4B3A;
  font-family: "思源宋体", sans-serif;
  line-height: 1.5;
}

.address-right {
  display: flex;
  align-items: center;
}

.arrow-right-small {
  font-size: 32rpx;
  color: #8C7B68;
}

/* 滑动操作区域 */
/* 滑动操作区域 */
.address-actions {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: flex;
  align-items: stretch;
  z-index: 1;
}

.action-btn {
  width: 100rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.edit-btn {
  background-color: #5C8D69;
  /* 青瓷绿 */
}

.delete-btn {
  background-color: #E76F51;
  /* 暖红色 */
}

.action-icon {
  width: 36rpx;
  height: 36rpx;
  margin-bottom: 6rpx;
}

.action-btn text {
  font-size: 22rpx;
  color: #FFFFFF;
  font-family: "思源宋体", sans-serif;
}

/* 空地址提示 */
.empty-address {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-icon {
  width: 180rpx;
  height: 180rpx;
  margin-bottom: 30rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #5C4B3A;
  font-family: "思源宋体", sans-serif;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.empty-subtitle {
  font-size: 24rpx;
  color: #8C7B68;
  font-family: "思源宋体", sans-serif;
}

/* 添加新地址按钮 */
.add-address-btn {
  position: fixed;
  bottom: 30rpx;
  left: 30rpx;
  right: 30rpx;
  height: 90rpx;
  background-color: #5C8D69;
  /* 青瓷绿 */
  border-radius: 45rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(92, 141, 105, 0.3);
  z-index: 5;
}

.add-icon {
  font-size: 36rpx;
  color: #FFFFFF;
  margin-right: 10rpx;
}

.add-text {
  font-size: 30rpx;
  color: #FFFFFF;
  font-family: "思源宋体", sans-serif;
  letter-spacing: 2rpx;
}

/* 地址编辑弹窗 */
.address-modal,
.confirm-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
}

.modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #FFFFFF;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  padding: 30rpx;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 30rpx;
  border-bottom: 1px solid #EEEAE3;
  margin-bottom: 30rpx;
}

.modal-title {
  font-size: 32rpx;
  color: #5C4B3A;
  font-family: "汉仪尚巍手书", "思源宋体", sans-serif;
  font-weight: bold;
}

.close-btn {
  font-size: 40rpx;
  color: #8C7B68;
}

.form-item {
  margin-bottom: 30rpx;
}

.form-label {
  font-size: 28rpx;
  color: #5C4B3A;
  font-family: "思源宋体", sans-serif;
  margin-bottom: 15rpx;
  display: block;
}

.form-input {
  height: 80rpx;
  background-color: #F8F5F0;
  border-radius: 12rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #5C4B3A;
  font-family: "思源宋体", sans-serif;
}

.region-picker {
  height: 80rpx;
  background-color: #F8F5F0;
  border-radius: 12rpx;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.region-text,
.placeholder-text {
  font-size: 28rpx;
  font-family: "思源宋体", sans-serif;
}

.region-text {
  color: #5C4B3A;
}

.placeholder-text {
  color: #BBAA99;
}

.form-textarea {
  height: 160rpx;
  background-color: #F8F5F0;
  border-radius: 12rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: #5C4B3A;
  font-family: "思源宋体", sans-serif;
  width: 100%;
  box-sizing: border-box;
}

.smart-textarea {
  height: 240rpx;
}

.address-paste-tip {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10rpx 0;
}

.paste-icon {
  width: 28rpx;
  height: 28rpx;
  margin-right: 8rpx;
}

.address-paste-tip text {
  font-size: 24rpx;
  color: #5C8D69;
  font-family: "思源宋体", sans-serif;
}

.switch-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 地址标签样式 */
.tag-options {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10rpx;
}

.tag-option {
  padding: 8rpx 30rpx;
  background-color: #EEEAE3;
  border-radius: 30rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
}

.tag-option text {
  font-size: 24rpx;
  color: #5C4B3A;
  font-family: "思源宋体", sans-serif;
}

.tag-active {
  background-color: #5C8D69;
}

.tag-active text {
  color: #FFFFFF;
}

.custom-tag-input {
  margin-top: 10rpx;
}

.form-btns {
  display: flex;
  margin-top: 50rpx;
}

.form-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-family: "思源宋体", sans-serif;
}

.cancel-btn {
  background-color: #EEEAE3;
  color: #8C7B68;
  margin-right: 20rpx;
}

.confirm-btn {
  background-color: #5C8D69;
  /* 青瓷绿 */
  color: #FFFFFF;
}

.full-btn {
  margin: 0;
}

/* 删除确认弹窗 */
.confirm-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 560rpx;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
}

.confirm-title {
  font-size: 32rpx;
  color: #5C4B3A;
  font-family: "汉仪尚巍手书", "思源宋体", sans-serif;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30rpx;
}

.confirm-text {
  font-size: 28rpx;
  color: #5C4B3A;
  font-family: "思源宋体", sans-serif;
  text-align: center;
  margin-bottom: 40rpx;
}

.confirm-btns {
  display: flex;
}

.confirm-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-family: "思源宋体", sans-serif;
}

.delete-btn {
  background-color: #E76F51;
  /* 暖红色 */
  color: #FFFFFF;
}

/* 识别规则样式 */
.recognition-rules {
  background-color: #F8F5F0;
  border-radius: 12rpx;
  padding: 20rpx;
  margin: 20rpx 0 30rpx;
}

.rule-title {
  font-size: 26rpx;
  color: #5C4B3A;
  font-family: "思源宋体", sans-serif;
  font-weight: bold;
  margin-bottom: 10rpx;
  display: block;
}

.rule-text {
  font-size: 24rpx;
  color: #8C7B68;
  font-family: "思源宋体", sans-serif;
  line-height: 1.5;
  display: block;
}

/* 识别结果样式 */
.recognition-result {
  background-color: #F8F5F0;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;
}

.result-item {
  margin-bottom: 15rpx;
  display: flex;
}

.result-label {
  font-size: 26rpx;
  color: #8C7B68;
  font-family: "思源宋体", sans-serif;
  width: 120rpx;
}

.result-value {
  font-size: 26rpx;
  color: #5C4B3A;
  font-family: "思源宋体", sans-serif;
  flex: 1;
}

/* 适配iPhone底部安全区域 */
.modal-content {
  padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
}

.add-address-btn {
  bottom: calc(30rpx + env(safe-area-inset-bottom));
}

/* 交互动效 */
@keyframes slideIn {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.modal-content {
  animation: slideIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.address-item {
  animation: fadeIn 0.3s ease-out;
}

.add-address-btn:active {
  transform: scale(0.98);
  opacity: 0.9;
}

.address-content:active {
  background-color: #F8F5F0;
}

.form-btn:active {
  opacity: 0.9;
}

.action-btn:active {
  opacity: 0.8;
}

.uni-data-tree {
  color: #5C4B3A;
  background: #F8F5F0;
}
</style>